<template>
  <div class="edit-container">
      <div class="steps-block">
        <div class="steps-item" style="cursor: pointer;" :class="active===1?'active':''" @click="changeActive(1)">
          <div class="round" :class="active===1?'active':''" @click="changeActive(1)">1</div>
          <div class="name">报灾详情</div>
          <div class="line" :class="active===1?'active':''" @click="changeActive(1)"></div>
        </div>
        <div class="steps-item" style="cursor: pointer;" :class="active===2?'active':''" @click="changeActive(2)">
          <div class="round" :class="active===2?'active':''" @click="changeActive(2)">2</div>
          <div class="name">分配单位</div>
          <div class="line" :class="active===2?'active':''" @click="changeActive(2)"></div>
        </div>
        <div class="steps-item" style="cursor: pointer;" :class="active===3?'active':''" @click="changeActive(3)">
          <div class="round" :class="active===3?'active':''" @click="changeActive(3)">3</div>
          <div class="name">处理详情</div>
          <div class="line" :class="active===3?'active':''" @click="changeActive(3)"></div>
        </div>
        <div class="steps-item" style="cursor: pointer;" :class="active===4?'active':''" @click="changeActive(4)">
          <div class="round" :class="active===4?'active':''" @click="changeActive(4)">4</div>
          <div class="name">理赔详情</div>
        </div>
      </div>
      <el-form v-loading="formLoading" ref="form" :model="form" label-width="100px">
      <div v-if="active===1">
          <el-form-item label="类型：">
            <div>{{ form.typeText }}</div>
          </el-form-item>
        <el-form-item label="村组：">
          <div>{{ form.areaName }}</div>
        </el-form-item>
        <el-form-item label="用户：">
          <div>{{ form.username }}</div>
        </el-form-item>
        <el-form-item label="用户手机：">
          <div>{{ form.phone }}</div>
        </el-form-item>
          <el-form-item label="位置：">
            <div>{{ form.position }}</div>
          </el-form-item>
          <el-form-item label="具体位置：">
            <div>{{ form.specificPosition }}</div>
          </el-form-item>
          <el-form-item label="灾害情况：">
            <div>{{ form.disasterSituation }}</div>
          </el-form-item>
          <el-form-item label="发生时刻：">
            <div>{{ form.occurTime }}</div>
          </el-form-item>
          <template v-if="form.pic!=null&&form.pic.length>0">
            <el-form-item :label="'图片('+(form.pic.length) +'/9)：'">
              <div class="acea-row">
                <div
                    v-for="(item,index) in form.pic"
                    :key="index"
                    class="pictrue mb10"
                    draggable="true"
                >
                  <el-image
                      v-if="item"
                      class="photo-el-image"
                      :src="item"
                      :preview-src-list="form.pic"
                      style="height: 120px;margin: 30px 30px 0 0;"
                  />
                </div>
              </div>
            </el-form-item>
          </template>
          <template v-if="form.video!=null&&form.video.length>0">
            <el-form-item :label="'视频('+(form.video.length) +'/9)：'">
              <div class="acea-row">
                <div
                    v-for="(item,index) in form.video"
                    :key="index"
                    class="videoBox"
                    draggable="true"
                >
                  <video v-if="item" :src="item" controls="true"
                         style="height: 120px;margin: 30px 30px 0 0;"></video>
                </div>
              </div>
            </el-form-item>
          </template>
      </div>
      <div v-if="form.unitsManagerModels&&active===2">
          <template >
            <div class="custom-block">
              <div v-for="item in form.unitsManagerModels" :key="item.id" class="custom-tag">
                <div class="info">姓名：{{ item.name }}</div>
                <div class="info">身份：{{ item.roleName }}</div>
              </div>
            </div>
          </template>
      </div>
      <div v-if="form.disasterHandle&&active===3">
          <el-form-item label="办理人：">
            <div>{{ form.disasterHandle.name }}</div>
          </el-form-item>
          <el-form-item label="办理时间：">
            <div>{{ form.disasterHandle.handleTime }}</div>
          </el-form-item>
          <el-form-item label="办理内容：">
            <div v-html="form.disasterHandle.handleText"></div>
          </el-form-item>
          <el-form-item label="图片和视频：">
            <div>
              <template v-if="form.disasterHandle.urlList">
                <div class="acea-row">
                  <div
                      v-for="(item,index) in form.disasterHandle.urlList"
                      :key="index"
                      class="pictrue mb10"
                      draggable="true"
                  >
                    <el-image
                        v-if="item"
                        class="photo-el-image"
                        :src="item"
                        :preview-src-list="form.disasterHandle.urlList"
                        style="height: 120px;margin: 30px 30px 0 0;"
                    />
                  </div>
                </div>
              </template>
            </div>
          </el-form-item>
          <template v-if="form.disasterHandle.videoList">
            <el-form-item>
              <div class="acea-row">
                <div
                    v-for="(item,index) in form.disasterHandle.videoList"
                    :key="index"
                    class="videoBox"
                    draggable="true"
                >
                  <video v-if="item" :src="item" controls="true" autoplay="false"
                         style="height: 120px;margin: 30px 30px 0 0;"></video>
                </div>
              </div>
            </el-form-item>
          </template>
      </div>
      <div v-if="form.claimsSettlementModel&&active===4">
          <el-form-item label="理赔状态：">
            <div v-if="form.claimsSettlementModel.claimsSettlementStatus === 1">已理赔</div>
            <div v-if="form.claimsSettlementModel.claimsSettlementStatus === 2">未理赔</div>
          </el-form-item>
          <el-form-item label="处理人：">
            <div>{{ form.claimsSettlementModel.processingName }}</div>
          </el-form-item>
          <el-form-item label="理赔时间：">
            <div>{{ form.claimsSettlementModel.processingTime }}</div>
          </el-form-item>
          <el-form-item label="备注：">
            <div v-html="form.claimsSettlementModel.remark"></div>
          </el-form-item>
          <el-form-item label="相关材料：">
            <template>
              <div>
                <div v-for="(file, index) in form.claimsSettlementModel.fileList" :key="index">
                  <el-divider>{{ file.name }}</el-divider>
                  <div v-if="isPDF(file.name)">
                    <el-button type="primary" @click="downloadPDF(file)">下载 PDF</el-button>
                  </div>
                  <div v-else-if="isImage(file.name)">
                    <img :src="file.url" @click="showImagePreview(file)" style="max-width: 100%; max-height: 500px;" />
                  </div>
                  <div v-else-if="isVideo(file.name)">
                    <video :src="file.url" controls style="max-width: 100%; max-height: 500px;"></video>
                  </div>
                </div>
              </div>
            </template>
          </el-form-item>
      </div>
      </el-form>
  </div>
</template>
<script>
import {detail, getTypeListApi} from "@/api/disaster";

export default {
  props: {
    id: {
      default: null
    }
  },
  data() {
    return {
      form: {
        pic: [],
        video: [],
        disasterHandle: {
          name: '',
          handleTime: '',
          handleText: '',
          urlList: [],
          videoList: []
        },
        claimsSettlementModel: {},
        unitsManagerModels: [],
        disasterSituation: '',
        occurTime: '',
        type: 0
      },
      active:1,
      saveLoading: false,
      formLoading: false,
      uploads: {
        show: false,
        multiple: true,
      },
      type: [],
      activeName: "first",
      secondVisible: false,
      thirdVisible: false,
      fourthVisible: false,
      dialogVisible: false,
      currentFile: {},
    }
  },
  mounted() {
    if (this.id) {
      this.getDetail();
    }
    this.getTypeList();
  },
  methods: {
    changeActive(e){
      if(e===1)
      {
        this.active=e
      }else if(this.form.unitsManagerModels&&e===2)
      {
        this.active=e
      }else if(this.form.disasterHandle&&e===3)
      {
        this.active=e
      }else if(this.form.claimsSettlementModel&&e===4)
      {
        this.active=e
      }
    },
    downloadPDF(file) {
      window.open(file.url, '_blank');
    },
    isPDF(fileName) {
      return fileName.toLowerCase().endsWith('.pdf');
    },
    isImage(fileName) {
      const extensions = ['.xbm', '.tif', '.pjp', '.svgz', '.jpg', '.jpeg', '.ico', '.tiff', '.gif', '.svg', '.jfif', '.webp', '.png', '.bmp', '.pjpeg', '.avif'];
      const ext = fileName.toLowerCase().substring(fileName.lastIndexOf('.'));
      return extensions.includes(ext);
    },
    isVideo(fileName) {
      // 检查是否是常见视频格式
      const videoExtensions = ['.mp4', '.avi', '.mpeg', '.quicktime', '.wmv', '.asf', '.asx', '.3gp', '.mov', '.m4v', '.dat', '.mkv', '.flv', '.vob'];
      const ext = fileName.toLowerCase().substring(fileName.lastIndexOf('.'));
      return videoExtensions.includes(ext);
    },
    showImagePreview(file) {
      window.open(file.url, '_blank');
    },
    handleClick(tab) {
      if (tab.name === 'second') {
        this.secondVisible = true;
      }
      if (tab.name === 'third') {
        this.thirdVisible = true;
      }
      if (tab.name === 'fourth') {
        this.fourthVisible = true;
      }

    },
    getTypeList() {
      getTypeListApi().then(res => {
        this.type = res;
      })
    },
    getDetail() {
      this.formLoading = true
      detail(this.id).then(res => {
        // getForm(res,this.form);
        this.form = res
        this.form.picList = res.url ? res.url.split(',') : []
        this.form.videoList = res.videoUrl ? res.videoUrl.split(',') : []
      }).finally(() => {
      }).finally(() => {
        this.formLoading = false;
      })
    },
    handlerSubmit() {
      if (this.saveLoading || this.formLoading) {
        return;
      }
      /*this.$refs.form.validate(valid=>{
        if(!valid)return;
        this.saveLoading=true;
        save(this.form).then(()=>{
          this.$message.success('保存成功');
          this.close();
        }).finally(()=>{
          this.saveLoading=false
        })
      })*/
    },
    close() {
      this.$emit('hideEditDialog')
    }
  }
}
</script>
<style scoped lang="scss">
.edit-container{
  min-height: 500px;
}
.custom-block{
  margin-bottom: 5px;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  .custom-tag:nth-child(2n){
    margin-right: 0;
  }
  .custom-tag {
    width: calc((100% - 20px) / 2);
    margin-right: 20px;
    padding: 10px;
    border: 1px solid #F5F5F5;
    margin-bottom: 15px;
    .info{
      padding:10px;
    }
  }
}
.info span {
  margin-right: 10px;
  font-weight: bold;
}
.acea-row {
  display: flex;
  flex-wrap: wrap;
}
.pictrue,
.videoBox {
  height: 120px;
  margin: 30px 30px 0 0;
}
.photo-el-image {
  height: 100%;
}
.steps-block{
  display: flex;
  align-items: center;
  justify-content: space-around;
  margin-bottom: 10px;
  .steps-item.active{
    color: #1e80ea;
  }
  .steps-item{
    display: flex;
    align-items: center;
    .round.active{
      background: #1e80ea;
      color: #FFFFFF;
    }
    .round{
      background: #F5F5F5;
      width: 24px;
      height: 24px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-right: 5px;
    }
    .name{
      margin-right: 10px;
    }
    .line.active{
      background: #1e80ea;
    }
    .line{
      width: 90px;
      height: 1px;
      background: #F5F5F5;
    }
  }
}
</style>
